<template>
  <div ref="input" class="input">
    <div ref="icon" class="icon focus-icon"><slot name="label"><i class="el-icon-s-finance need"></i></slot></div>
    <input
      @focus="handleFocus"
      @blur="handleBlur"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
      :type="type"/>
  </div>
</template>

<script>
export default {
  name: 'Input',
  props: ['type', 'value'],
  data () {
    return {

    }
  },
  methods: {
    handleFocus () {
      this.$refs.input.classList.add('background-color')
      this.$refs.icon.classList.add('focus-icon')
    },
    handleBlur () {
      this.$refs.input.classList.remove('background-color')
      this.$refs.icon.classList.remove('focus-icon')
    }
  }
}
</script>

<style scoped lang="less">
  .input {
    display: flex;
    width: 400px;
    height: 44px;
    border: rgb(228, 245, 239) 1px solid;
    outline: -webkit-focus-ring-color auto 1px;
    .icon {
      font: 30px/44px "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      margin:0 10px;
    }
    .focus-icon {
      color: #42b983;
    }
  }
  input {
    flex: 1 1 100%;
    background: none;
    /*font-size: 22px*/
  }
  input:focus {
    outline: none;
    font: 22px/44px "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }
  .background-color {
    background-color: white;
    border-bottom: 2px solid #42b983;
  }
  .need::after{
    display: inline;
    content: '*';
    color: red;
    font-size: 16px;
  }

</style>
